以前還是 UI/UX Designer 的時候，我其實很少去想一個畫面背後到底是怎麼被做出來的。

設計稿畫好、互動流程整理好，再交給工程師實作。

那時候如果工程師說：

「這個這樣做會比較麻煩。」

心裡偶爾還會想：

不就是長這樣嗎？有這麼難嗎？

直到後來真的轉職成前端工程師，我才慢慢理解——

畫面看起來簡單，不代表背後的資料、狀態和流程也簡單。

從 <h1>Hello, World!</h1> 開始

剛開始學程式時，我最熟悉的是 HTML 和 CSS。

例如：

<h1>Hello, World!</h1>

這種程式碼對我來說相對直覺。

寫一個 h1
↓
畫面出現一個標題

甚至 CSS 也有類似的感覺：

.title {
  color: red;
}

設定 red
↓
畫面變紅色

因為結果是「看得到的」。

但開始學 JavaScript 之後，事情突然不一樣了。

例如：

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("clicked");
});

每個單字好像都可以查懂：

const
document
querySelector
addEventListener
click

但它們全部放在一起時，我還是不知道：

為什麼下一行是這個？

我以前其實是在背「程式碼順序」

那時候很常出現一種狀況。

老師示範：

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("clicked");
});

我會努力記：

先 querySelector
↓
再 addEventListener
↓
裡面再寫 function

當下看起來好像懂了。

但只要題目稍微換一下：

按按鈕
↓
新增一筆資料
↓
顯示到畫面

我又不知道第一步該寫什麼。

後來才發現，我真正缺少的不是多背幾個語法。

而是我根本還沒有理解：

程式現在正在做什麼，以及下一步為什麼需要發生。

與其從第一行往下讀，不如先把流程翻成人話

例如剛才這段：

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("clicked");
});

如果只看程式碼，對初學者來說可能很像咒語。

但如果先翻成人話：

找到 #button
↓
把它存進 button
↓
監聽 click
↓
等待使用者點擊
↓
使用者真的點了
↓
執行裡面的 function
↓
console 印出 clicked

突然就合理很多。

這時候我才開始發現：

document.querySelector("#button");

不是因為「JavaScript 第一行都要寫這個」。

而是因為：

後面要監聽按鈕，所以我得先找到那顆按鈕。

而：

button.addEventListener("click", ...)

也不是因為「querySelector 下一行一定是 addEventListener」。

而是需求裡有：

使用者點擊按鈕時，要發生某件事情。

我後來開始換一種方式看程式

以前我會問：

下一行要寫什麼？

現在我比較會問：

這個功能想做什麼？
↓
誰觸發？
↓
資料從哪裡來？
↓
中間經過什麼處理？
↓
最後要影響哪裡？

例如：

使用者按按鈕
↓
取得輸入內容
↓
處理資料
↓
更新畫面

先理解這條線，再去找：

哪一段程式負責按鈕？
哪一段取得資料？
哪一個 function 處理？
最後是哪裡 Render？

對我來說，比一開始就硬著頭皮從第一行看到最後一行有效很多。

真正進到專案後，這件事變得更重要

到了真正的 React 專案，程式碼不再只有十幾行。

可能同時看到：

Component
Props
State
useEffect
useRequest
API
Form
onFinish
Context

如果每一個陌生語法都停下來查，常常會變成：

查第一個
↓
跳去看文件
↓
文件又出現新的名詞
↓
繼續查
↓
最後忘記原本這個頁面在做什麼

所以我現在更習慣先找：

資料從哪裡進來？
↓
誰處理它？
↓
什麼時候觸發？
↓
最後資料跑去哪裡？

等整條流程大概看懂，再回頭補不熟的語法。

這 30 天想記錄的，就是這件事

這個系列不會是 JavaScript 或 React API 大全。

我比較想記錄的是：

一個從 UI/UX 轉進工程領域的人，是怎麼慢慢從「每個單字都看得懂，但整段不知道在幹嘛」，走到能開始追程式資料流。

接下來會從很簡單的 JavaScript 小功能開始，再慢慢進到：

JavaScript
↓
React
↓
State / Props
↓
Component
↓
API Request / Response
↓
真實專案中的 Debug

也會加入一些實際開發裡遇過、但經過匿名化處理的問題。

因為直到現在，我也還只是一個修煉中的麻瓜。

只是比起以前，我開始知道：

看不懂程式時，不一定要先查每個咒語。
有時候應該先搞懂，這個魔法到底想完成什麼。

下一篇，就從一個最簡單的小功能開始：

不要背程式碼順序，先搞懂「下一步要發生什麼」。